import { Modal } from "antd";
import type { UserInfo } from "#/entity";
import DynamicQueryTable, { SelectionType } from "@/components/report/DynamicQueryTable";
import { useState } from "react";

interface MultiUserSelectorProps {
	open: boolean;
  //业务表名
  relateTableName: string;
  //业务ID
  bizId?: React.Key
  relateFiled?: string;
	onCancel: () => void;
	onOk: (selectedUsers: UserInfo[]) => void;
}

const MultiUserSelector:React.FC<MultiUserSelectorProps> = ({ open, relateTableName, bizId,relateFiled, onCancel, onOk }) => {
  
  // 选中的用户
  const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>([]);

  // 查询参数
  const params = {
    relate_table_name: relateTableName,
    biz_id: bizId,
    relate_filed: relateFiled
  }

  const handleOk = () => {
		onOk(selectedUsers);
	};

	return (
		<Modal title="选择用户" open={open} onCancel={onCancel} onOk={handleOk} width={800} destroyOnClose>
			<DynamicQueryTable 
        reportCode="add_relate_user_report" 
        params={params} 
        selectionType={SelectionType.CHECKBOX}
        onSelectChange={(selectedRows) => {setSelectedUsers(selectedRows)}}  
      />
		</Modal>
	);
}

export default MultiUserSelector;